<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>事件</title>
    <style type="text/css">
        input{font-size:26px;margin-top: 20px;}
        body{background-image: url(images/grassland.png);}
        #mytank{position: absolute;left:10px;top:100px}
    </style>
</head>
<body>
<input type="button" value="按钮一"/>
<input type="button" value="按钮二" />
<input type="button" value="按钮三" />
<hr />
<img id="mytank" src="images/right.png"/>
<script type="text/javascript">
    //179000550黄超凡
    var mytank = document.getElementById('mytank');
    let btns = document.querySelectorAll("input");
    // console.log(btns);

    btns[0].addEventListener(
        "click",                //  点击事件
        function () {
            alert("javascript事件测试一");
    });
    btns[1].addEventListener(
        "dblclick",             //  双击事件
        function () {
            btns[1].value = "按钮测试二";
        });
    btns[2].addEventListener(
        "mouseover",            //  当鼠标移动至本组件上
        function () {
            btns[2].style.color = "pink";
            btns[2].style.backgroundColor = "yellow";
        });
    btns[2].addEventListener(
        "mouseout",             //  当鼠标移出本组件
        function () {
            btns[2].style.color = "";
            btns[2].style.backgroundColor = "";
        });
    btns[2].addEventListener(
        "click",
        function () {
            alert("javascript事件测试三");
        });
    window.addEventListener(
        'keydown',
        function(e) {
            console.log(e.keyCode);
            //  向上移动
            if (e.keyCode == 38) {
                mytank.src = "images/up.png";
                mytank.style.top = (mytank.offsetTop - 10) + 'px';
            }
            //  向左移动
            if (e.keyCode == 37) {
                mytank.src = "images/left.png";
                mytank.style.left = (mytank.offsetLeft - 10) + 'px';
            }
            //  向右移动
            if (e.keyCode == 39) {
                mytank.src = "images/right.png";
                mytank.style.left = (mytank.offsetLeft + 10) + 'px';
            }
            //  向下移动
            if (e.keyCode == 40) {
                mytank.src = "images/down.png";
                mytank.style.top = (mytank.offsetTop + 10) + 'px';
            }
        });

    //  禁止网页点击右键出现菜单
    document.oncontextmenu = function () {
        return false;
    }

</script>
</body>
</html>
